<template>
  <div>
    <div class="d-flex justify-content-between">
      <h4 style="font-size: 1.142857rem">大数据查询</h4>
    </div>
    <div :style="{ height: `${height}px`, overflowY: 'auto' }">
      <ul class="list-unstyled">
        <li>
          <div class="search-item" @click="projectSearchVisible = true">
            <div class="search-item-title">
              <i class="fa fa-fw fa-list-ul mr-3 text-success"></i>
              <span>公共项目库</span>
            </div>
            <span class="text-muted">
              查询
              <i class="fa fa-angle-right"></i>
            </span>
          </div>
        </li>
        <li>
          <div class="search-item" @click="financeVisble = true">
            <div class="search-item-title">
              <i class="fa fa-fw fa-user-times mr-3 text-danger"></i>
              <span>信用查询</span>
            </div>
            <span class="text-muted">
              查询
              <i class="fa fa-angle-right"></i>
            </span>
          </div>
        </li>
        <li>
          <div class="search-item" @click="productVisible = true">
            <div class="search-item-title">
              <i class="fa fa-fw fa-line-chart mr-3 text-info"></i>
              <span>产品白名单管理</span>
            </div>
            <span class="text-muted">
              查询
              <i class="fa fa-angle-right"></i>
            </span>
          </div>
        </li>
        <li>
          <div
            class="search-item"
            @click="
              handlePreviewOffice('https://vimi8.oss-cn-shenzhen.aliyuncs.com/风险信用报告.xlsx')
            "
          >
            <div class="search-item-title">
              <i class="fa fa-fw fa-file-text-o mr-3 text-warning"></i>
              <span>风险预警管理</span>
            </div>
            <span class="text-muted">
              查询
              <i class="fa fa-angle-right"></i>
            </span>
          </div>
        </li>
      </ul>
    </div>

    <project-search-dialog :visible.sync="projectSearchVisible"></project-search-dialog>
    <product-dialog :visible.sync="productVisible"></product-dialog>

    <finance-dialog :visible.sync="financeVisble"></finance-dialog>
  </div>
</template>
<script>
import ProjectSearchDialog from '@/bank/views/index/ProjectSearchDialog'
import { officePreview } from '@/common/plugins/tools/dom'
import ProductDialog from '@/bank/views/business/index/ProductDialog'
import FinanceDialog from '@/credit/views/county/finance/FinanceDialog'
export default {
  components: {
    ProjectSearchDialog,
    ProductDialog,
    FinanceDialog,
  },
  props: {
    height: {
      type: Number,
      default: 300,
    },
  },
  data() {
    return {
      projectSearchVisible: false,
      productVisible: false,
      windowObjectReference: null,
      financeVisble: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // office预览
    handlePreviewOffice(url) {
      if (this.windowObjectReference !== null && !this.windowObjectReference.closed) {
        this.windowObjectReference.close()
      }

      this.windowObjectReference = officePreview({
        url: url,
      })
    },
    handleViewPdf(url) {
      window.open(url)
    },
  },
}
</script>
<style lang="scss" scoped>
.search-item {
  display: flex;
  padding: 1rem;
  background-color: #f2f2f2;
  border-radius: 0.15rem;
  margin-bottom: 1rem;
  border: 1px solid #f2f2f2;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s;
  cursor: pointer;

  &:hover {
    background-color: #fff;
    border-color: $primary;
    border-color: var(--primary);
  }

  .search-item-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #666;
  }
}
</style>
